<!DOCTYPE html>
<html>
<head>
    <title>设备KPI</title>
    #parse("sys/header.html")
    <style>
        #rrapp {
            width: 100%;
            height: 100%;
            padding: 5px;
        }
        .ivu-form-item {
            margin-bottom: 0px;
        }
        .main {
            padding: 10px;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            position: relative;
            align-content: flex-start;
            overflow: auto;
            overflow-x: hidden;
        }
        .main .item{
            width: 50%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="rrapp">
    <Card :padding=8>
        <Row :gutter="1" justify="center">
            <i-col span="6">
                <Cascader :data="deviceOrganizationList" trigger="hover" change-on-select @on-change="changeArea"
                          placeholder="默认显示工厂KPI总览"></Cascader>
            </i-col>
            <i-col span="6">
                <i-select v-model="q.targetList" multiple placeholder="请选择维度">
                    <i-option v-for="item in kpiTargetList" :value="item.value" :key="item.value"
                              v-if="item.index <= q.level">{{item.label}}
                    </i-option>
                </i-select>
            </i-col>
            <i-col span="6">
                <Date-picker type="year" v-model="q.yearly" placeholder="请选择年份"></Date-picker>
            </i-col>
            <i-col span="2">
                <i-button @click="loadAndRenderKpiView">生成KPI报表</i-button>
            </i-col>
            <i-col span="2">
                <i-button @click="reset">重置</i-button>
            </i-col>
            </i-form>
        </Row>
    </Card>
    <!-- KPI图表区域 -->
    <div class="main" id="main"></div>
</div>
</body>
<script src="${rc.contextPath}/statics/plugins/echarts/echarts.min.js"></script>
<script src="${rc.contextPath}/js/analyse/overview.js?_${date.systemTime}"></script>
</html>
